/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Icon } from '@icedesign/base';
import cloneDeep from 'lodash.clonedeep';
import CustomForm from '../CustomForm';
import Api from '../../../../Api/Api';
import Ajax from '../../../../Ajax';
import PropTypes from 'prop-types';

export default class SearchFilter extends Component {
  static displayName = 'SearchFilter';

  static propTypes = {
    dataSource: PropTypes.array,
  };

  static defaultProps = {};

  initFields = {
    base: {
      id: '',
      username: '',
      pid: '',
    },
    advanced: {
      createTime: [],
      signTime: [],
      endTime: [],
      state: '',
      type: '',
      checkbox: 'false',
    },
  };

  state = {
    // showAdvancedFields: false,
    value: cloneDeep(this.initFields),
  };

  /**
   * 提交回调函数
   */
  handleSubmit = (errors, value) => {
    if (errors) {
      console.log({ errors });
      return;
    }
    // this.props.fetchData(value, 1);
    // if (!value['pid'] && !value['id'] && !value['username'] ) {
      
    // } else {
      this.props.fetchData(value, 1);
      console.log(value);
    // }
  };

  /**
   * 重置表单
   */
  handleReset = () => {
    this.setState(
      {
        value: Object.assign(
          {},
          this.initFields.base,
          this.initFields.advanced
        ),
      }
    );
  };

  /**
   * 获取渲染表单的字段
   */
  getFormFiled = (initConfig) => {
    const { showAdvancedFields } = this.state;
    const { initFields } = this;
    if (showAdvancedFields) {
      return {
        config: initConfig,
        fields: Object.assign({}, initFields.base, initFields.advanced),
      };
    }

    const config = initConfig.filter((item) => {
      const keys = Object.keys(initFields.base);
      return keys.includes(item.formBinderProps.name);
    });

    return {
      config,
      fields: initFields.base,
    };
  };

  render() {
    const config = [
      {
        label: '订单编号',
        component: 'Input',
        componentProps: {
          placeholder: '请输入商品编号',
          size: 'large',
        },
        formBinderProps: {
          name: 'id',
          required: false,
          message: '请输入正确的合同编号',
        },
      },
      {
        label: '商品编号',
        component: 'Input',
        componentProps: {
          placeholder: '请输入商品名称',
          size: 'large',
        },
        formBinderProps: {
          name: 'pid',
          required: false,
          message: '请输入正确的商品名称',
        },
      },
      {
        label: '订单人',
        component: 'Input',
        componentProps: {
          placeholder: '请输入订单人',
          size: 'large',
        },
        formBinderProps: {
          name: 'username',
          required: false,
          message: '请输入正确的订单人',
        },
      },
    ];

    const getFormFiled = this.getFormFiled(config);
    return (
      <CustomForm
        value={this.state.value}
        config={getFormFiled.config}
        handleSubmit={this.handleSubmit}
        handleReset={this.handleReset}
        // extraContent={this.renderExtraContent()}
      />
    );
  }
}

const styles = {
  // extraContent: {
  //   position: 'absolute',
  //   right: '0',
  //   bottom: '0',
  //   color: 'rgba(49, 128, 253, 0.65)',
  //   cursor: 'pointer',
  // },
};
